<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File MD5 Modification</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<input type="file" id="fileInput" multiple />
<button id="processFiles">Process Files</button>
<table>
    <thead>
        <tr>
            <th>Original File Name</th>
            <th>Original File Size (bytes)</th>
            <th>Original MD5</th>
            <th>Modified MD5</th>
            <th>Status</th>
            <th>Download</th>
        </tr>
    </thead>
    <tbody id="fileTableBody">
    </tbody>
</table>

<script>
document.getElementById('processFiles').addEventListener('click', function () {
    const fileInput = document.getElementById('fileInput');
    const fileTableBody = document.getElementById('fileTableBody');
    fileTableBody.innerHTML = '';

    if (fileInput.files.length === 0) {
        alert('Please select files first.');
        return;
    }

    Array.from(fileInput.files).forEach(file => {
        const reader = new FileReader();
        
        reader.onload = function (e) {
            const arrayBuffer = e.target.result;
            
            // Calculate MD5 using SparkMD5
            const originalMD5 = SparkMD5.ArrayBuffer.hash(arrayBuffer);

            // Modify file content by adding a unique identifier (e.g., current timestamp)
            const modifiedArrayBuffer = new Uint8Array(arrayBuffer);
            console.log(modifiedArrayBuffer)
            const uniqueIdentifier = new TextEncoder().encode('Modified_' + Date.now());
            const combinedArrayBuffer = new Uint8Array(modifiedArrayBuffer.length + uniqueIdentifier.length);
            
            combinedArrayBuffer.set(modifiedArrayBuffer);
            combinedArrayBuffer.set(uniqueIdentifier, modifiedArrayBuffer.length);
            console.log(combinedArrayBuffer)
            
            // Calculate MD5 of the modified file
            const modifiedMD5 = SparkMD5.ArrayBuffer.hash(combinedArrayBuffer.buffer);
            
            // Create download link
            const blob = new Blob([combinedArrayBuffer.buffer], { type: file.type });
            const url = URL.createObjectURL(blob);
            const downloadLink = document.createElement('a');
            downloadLink.href = url;
            downloadLink.download = 'modified_' + file.name;
            downloadLink.innerText = 'Download';

            // Append results to table
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${file.name}</td>
                <td>${file.size}</td>
                <td>${originalMD5}</td>
                <td>${modifiedMD5}</td>
                <td>Modified</td>
                <td></td>
            `;
            row.cells[5].appendChild(downloadLink);
            fileTableBody.appendChild(row);
        };
        
        reader.readAsArrayBuffer(file);
    });
});
</script>

</body>
</html>
